<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width:100px;
        height:100px;
        background-color: yellow;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //点击按钮以后，读取box1的样式
        var box1=document.getElementById("box1");
        var btn01=document.getElementById("btn01");
        btn01.onclick=function()
        {
            //读取box1的宽度,样式表里的样式
            //获取元素的当前显示的样式
            //语法 元素.currentStyle.样式名
            //他可以用来读取当前元素正在显示的样式
            //alert(box1.currentStyle.height);
            //此方法适用的浏览器很少，但是IE适用

            //在其他浏览器中可以使用
            //getComputedStyle()这个方法来获取元素当前的样式
            //这个方法是window的方法，可以直接使用
            //需要两个参数，第一个是获取样式的元素，第二个可以传递一个伪元素，比如null
            //如果获取的样式没有设置值，则获取到的是真实的值（会随着浏览器实际大小变化），而不是默认值
            //比如没有设置width，那么获取到的不是auto，而是一个真实的像素值
            /**
            var box10bj=getComputedStyle(box1,null);
            console.log(box10bj.width);
            console.log(box10bj.height);
            console.log(box10bj.backgroundColor);
            **/

            console.log(getStyle(box1,"height"));
            console.log(getStyle(box1,"width"));
            console.log(getStyle(box1,"backgroundColor"));
        };

        
    };
    //定义一个函数，用来获取指定元素的当前的样式
    //所需参数：
    //obj 要获取样式的元素
    //name 要获取的样式名
    function getStyle(obj,name)
    {
        if(window.getComputedStyle)
        //在全局作用域中找此方法时，此方法就是个属性，如果找寻不到，系统不会报错
        {
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj,null)[name];//用中括号来声明name是个变量
        }
        else
        {
            //IE8的方式中，没有getComputedStyle()方法
            //也可以用obj.currentStyle()
            return obj.currentStyle[name];//这是IE8的方式
        }    
    };

    //通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改
    //如果需要修改必须通过style属性
    </script>
</head>
<body>
    <button id="btn01">按钮一</button>
    <br><br>
    <div id="box1"></div>
</body>
</html>